<script setup>
import {computed} from 'vue'
import * as XLSX from 'xlsx';
// 表单的数据
import {
  useGepRegulationServiceStore,
  useGepSupplyServiceStore,
  useGepCulturalServiceStore,
  useGepDataStore
} from "@/stores/gep";
import {storeToRefs} from "pinia";
const gepSupplyServiceStore = useGepSupplyServiceStore();
const gepRegulationServiceStore = useGepRegulationServiceStore();
const gepCulturalServiceStore = useGepCulturalServiceStore();
const gepDataStore = useGepDataStore();

const {
  gepResultArea,
  gepYear,
  gepValue,
  isSubmitted,
  outGepResultArea
} = storeToRefs(gepDataStore);

const {
  outGepSupplyService,
  outCalcMaterialSupply,
  outCalcWaterResources,
  outEcologicalEnergy
} = storeToRefs(gepSupplyServiceStore);
const {
  outGepRegulationService, outCalcBiodiversityProtection, outCalcNoiseReduced,
  inWaterSourceConservation, inSoilConservation, inNegativeOxygenIons, inAirPurification,
  inWaterPurification, inClimateRegulation, inOxygenRelease, inCarbonSequestration
} = storeToRefs(gepRegulationServiceStore);
const {
  outGepCulturalService,
  outCalcLandscapeAppreciation,
  outCalcLeisureRecreation,
  outTourismHealth
} = storeToRefs(gepCulturalServiceStore);


// 清空表单处理函数
function backToGep() {
  // 用刷新页面代替
  // window.location.reload();
  isSubmitted.value = false;
}


function formatGepValue(value) {
  // 将值转换为数字，确保处理正确
  const numericValue = parseFloat(value);

  // 检查整数位数
  if (numericValue >= 10000) { // 6位数的界限
    return (numericValue / 10000).toFixed(2) + " 亿元";
  } else {
    return numericValue.toFixed(2) + " 万元";
  }
}
</script>

<template>
  <div class="gep-box-border" >
    <p class="summary">
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="highlight">{{outGepResultArea}}</span><span class="highlight">{{ gepYear }}</span>年生态产品总值（GEP）为
      <span class="highlight">{{ formatGepValue(gepValue) }}</span>。
<!--      <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-->
      其中，生态物质供给价值
      <span class="highlight">{{ formatGepValue(outGepSupplyService) }}</span>，约占GEP的
      <span class="highlight">{{ (outGepSupplyService / gepValue * 100).toFixed(2) }}%</span>；
      生态调节服务价值
      <span class="highlight">{{ formatGepValue(outGepRegulationService) }}</span>，约占GEP的
      <span class="highlight">{{ (outGepRegulationService / gepValue * 100).toFixed(2) }}%</span>；
      娱乐文化服务价值
      <span class="highlight">{{ formatGepValue(outGepCulturalService) }}</span>，约占GEP的
      <span class="highlight">{{ (outGepCulturalService / gepValue * 100).toFixed(2) }}%</span>。
      <br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      本核算采用的标准为国家发展和改革委员会、国家统计局发布的核算规范《生态产品总值核算规范》（发改基础[2022] 481号)。具体各指标价值如下图所示：<br>

    </p>
  </div>

</template>
<style scoped>
.gep-box-border {
  margin: 20px; /* 外边距 */
  padding: 50px 10px 10px 150px; /* 内边距 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.summary {
  font-family: 'Arial', sans-serif; /* 字体 */
  font-size: 26px; /* 字体大小 */
  line-height: 1.5; /* 行高 */
  color: #ffffff; /* 字体颜色 */
  margin-left: -120px;
}

.highlight {
  font-weight: bold; /* 加粗 */
  color: #efcf3c; /* 高亮颜色，可以选择红色 */
  font-size: 28px; /* 字体大小 */
}

/* 添加响应式样式 */
@media (max-width: 600px) {
  .summary {
    font-size: 18px; /* 小屏幕字体大小 */
  }
}
</style>
